import React, {useEffect, useState} from "react";
import {Table, Tag, Button, Modal, Popover, Switch} from "antd";
import axios from "axios";
import {DeleteOutlined, ExclamationCircleOutlined, SearchOutlined} from "@ant-design/icons";

const {confirm} = Modal

export default function RightList() {
    // Table属性
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '权限名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            key: 'key',
            render: (key) => {
                return <Tag color={"orange"}>{key}</Tag>
            }
        },
        {
            title: '操作',
            render: (item) => {
                return (
                    <div>
                        <Popover content={<div style={{textAlign: "center"}}>
                            <Switch checked={item.pagepermisson} onChange={() => switchMethod(item)}></Switch>
                        </div>} title="Title" trigger={item.pagepermisson === undefined ? '' : 'click'}>
                            <Button type={"primary"} shape="circle" icon={<SearchOutlined/>}
                                    disabled={item.pagepermisson === undefined}/>
                        </Popover>

                        <Button type={"danger"} shape="circle" style={{margin: 10}} icon={<DeleteOutlined/>}
                                onClick={() => confirmMethod(item)}/>

                    </div>
                )
            }
        }
    ]

    // dataSource
    const [dataSource, setDataSource] = useState([])
    useEffect(async () => {
        let res = await axios.get('http://localhost:5000/rights?_embed=children')
        const list = res.data
        list.forEach(item => {
            if (item.children.length === 0)
                item.children = ""
        })
        setDataSource(list)
    }, [])

    //确定是否删除弹框
    const confirmMethod = (item) => {
        confirm({
            title: '确定要删除吗',
            icon: <ExclamationCircleOutlined/>,
            // content: 'Some descriptions',
            async onOk() {
                // console.log('OK');
                await deleteMethod(item)
            },
            onCancel() {
                // console.log('Cancel');
            },
        });
    }

    // 删除函数
    const deleteMethod = async (item) => {
        console.log(item)
        if (item.grade === 1) {
            setDataSource(dataSource.filter(data => data.id !== item.id))
            await axios.delete(`http://localhost:5000/rights/${item.id}`)
        } else if (item.grade === 2) {
            let list = dataSource.filter(data => data.id === item.rightId)
            list[0].children = list[0].children.filter(data => data.id !== item.id)
            setDataSource([...dataSource])
        }
    }

    // 开关方法
    const switchMethod = (item) => {
        // console.log('before:',item)
        item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
        setDataSource([...dataSource])
        // console.log('after:',item)
        if(item.grade === 1){
            axios.patch(`http://localhost:5000/rights/${item.id}`,{
                pagepermisson:item.pagepermisson
            })
        }else{
            axios.patch(`http://localhost:5000/children/${item.id}`,{
                pagepermisson:item.pagepermisson
            })
        }
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 5
            }}
            rowKey={item=>item.id}/>
        </div>
    )
}
